<%
  int iWidth = 100;
  int iHeight = 70;
  String enabledColor = "green";
  String disabledColor = "lightgrey";
 %>

<style type='text/css'>
body {
 font-family: arial;
}
.xorkeypad {
  width: 200px;
  height: 200px;
  position: relative;
}
#left,#right,
#left-disabled,#right-disabled
{
  width: 100px;
  height: 60px;
  position: absolute;
  top: 0px;
}
#left, #left-disabled {	left: 0px;}
#right, #right-disabled {left: <%= iWidth %>px;}
#left-disabled,#right-disabled {
	background-color: <%= disabledColor %>;
}
#left, #right {
	background-color: <%= enabledColor %>;
}
</style>

XOR Key
<br/>
<br/>
Idea is to use a sprite to populate a panel with 2 elements.  Only one may be active at a time.  
So if the panel is clicked then the state of the elements will be switched.

<div class='xorkeypad' style=''>
<div id='left-disabled'></div>
<div id='right'></div>
</div>  